[#assign title]游戏详情[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    .progress {
        height: 8px;
    }

    .download {
        margin-top: -2em;
        float: right;
        color: #D8AE0F;
        text-align: center;
    }

    .download img {
        width: 32px;
        height: 32px;
        display: block;
        margin: auto;
    }
</style>
[/#macro]
[#macro body]
<h4>{{game.name}}【{{game.region}}】</h4>
<div class="row">
    <div class="col-12">
        第{{game.period}}期
    </div>
</div>
<div class="row">
    <div class="col-8 text-secondary">
        总价:{{(game.price * game.people) | formatDecimal}}金豆
    </div>
    <div class="col-4">
        <a class="download" href="http://wb.ihuizhi.com/chess/invite/downInvite">
            <img src="/static/images/game/download.svg"/>
            下载游戏
        </a>
    </div>
</div>
<div class="row small text-muted">
    <div class="col-4 d-flex justify-content-center flex-column">
        <div class="d-flex justify-content-center">参与</div>
        <div class="d-flex justify-content-center text-primary">{{room.people}}</div>
    </div>
    <div class="col-4 d-flex justify-content-center flex-column">
        <div class="d-flex justify-content-center">总需</div>
        <div class="d-flex justify-content-center">{{game.people}}</div>
    </div>
    <div class="col-4 d-flex justify-content-center flex-column">
        <div class="d-flex justify-content-center">还需</div>
        <div class="d-flex justify-content-center text-danger">{{(game.people - room.people)||0}}</div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="progress">
            <div class="progress-bar" role="progressbar"
                 :style="{width: (room.people*100/game.people).toFixed(0) + '%'}">
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <p class="text-muted">报名后，请确认所有参与人员都在线后再开始</p>
        <p class="text-muted">开始后，请进聊天室，二维码结算，并点击<strong>『结算』</strong>按钮</p>
    </div>
</div>
<div class="row" v-show="!addedRoom">
    <div class="col-12">
        <button type="button" class="btn btn-lg btn-block btn-primary" @click="addRoom">
            加入游戏
        </button>
    </div>
</div>
<div class="row" v-show="addedRoom">
    <div class="col-6">
        <button type="button" class="btn btn-lg btn-block btn-primary" @click="exitRoom">
            退出游戏
        </button>
    </div>
    <div class="col-6">
        <a href="/room/chat" class="btn btn-lg btn-block btn-info">进入聊天室</a>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <table class="table mt-4">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>昵称</th>
                <th>报名时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="!gamePlayers || gamePlayers.length == 0">
                <td colspan="3" class="text-center">
                    暂无人员报名
                </td>
            </tr>
            <tr v-if="gamePlayers && gamePlayers.length > 0" v-for="player in gamePlayers">
                <td>&nbsp;</td>
                <td>{{player.nickname}}</td>
                <td>{{player.createdDate | formatDate}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            loginUserId: '${LoginUser.id}',
            game: {
                price: 0
            },
            room: {
                people: 0
            },
            gamePlayers: []
        },
        methods: {
            refresh: function () {
                var vm = this;
                axios.post('/game/detail/${gameId}').then(function (response) {
                    vm.game = response.data;
                });
                axios.post('/room/detail/${gameId}/status-wait').then(function (response) {
                    var data = response.data;
                    vm.room = data || vm.room;

                    if (!vm.room.id) {
                        return;
                    }
                    axios.post('/room/players/' + vm.room.id).then(function (response) {
                        vm.gamePlayers = response.data;
                    });
                });
            },
            addRoom: function () {
                var vm = this;
                vm.$indicator.open({
                    text: '处理中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/room/join', {id: vm.room.id, gameId: vm.game.id}).then(function (response) {
                    vm.$indicator.close();
                    vm.$toast(response.data || '报名成功,即将自动跳转聊天室');
                    vm.refresh();
                    setTimeout(function () {
                        window.location.href = '/room/chat';
                    }, 1000);
                }).catch(function (error) {
                    vm.$indicator.close();
                    var response = error.response;
                    vm.$toast((response ? response.data : error.message) || '报名失败,请稍候重试');
                    if (response.headers.location) {
                        setTimeout(function () {
                            window.location.href = response.headers.location;
                        }, 2000);
                    }
                });
            },
            exitRoom: function () {
                var vm = this;
                vm.$indicator.open({
                    text: '处理中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/room/exit', {id: vm.room.id}).then(function (response) {
                    vm.$indicator.close();
                    vm.refresh();
                    vm.$toast('退出成功');
                }).catch(function (error) {
                    vm.$indicator.close();
                    var response = error.response;
                    vm.$toast((response ? response.data : error.message) || '退出失败,请稍候重试');
                });
            }
        },
        computed: {
            addedRoom: function () {
                var vm = this;
                var gamePlayers = vm.gamePlayers;
                for (var index in gamePlayers) {
                    if (gamePlayers[index].id == vm.loginUserId) {
                        return true;
                    }
                }
                return false;
            }
        },
        mounted: function () {
            this.refresh();
        }
    });
</script>
[/#macro]